<template>
  <div
    class="medo-rank-container"
    :style="{ width: options.width ? `${options.width}px` : '100%', height: options.height ? `${options.height}px` : '100%' }"
  >
    <el-row
      type="flex"
      class="rank-item"
      v-for="(item, i) in rankList"
      :key="i"
      @click="medoVRankRowClick(item)"
    >
      <el-col :span="3">
        <span
          class="rank-item-no"
          :style="{
            'background-Image': `-webkit-linear-gradient(0deg, ${options.colors[i] ? options.colors[i] : '#c0c4cc'},${hexToRgba(
              options.colors[i] ? options.colors[i] : '#c0c4cc',
              0.5,
            )}) `,
          }"
        >TOP{{ i + 1 }}</span>
      </el-col>
      <el-col :span="6" class="rank-item-name">{{ item.name }}</el-col>
      <el-col :span="10" style="display: flex; align-items: center">
        <el-progress
          :percentage="item.percent > 100 ? 100 : item.percent"
          color="#357FD6"
          :show-text="false"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="5" class="rank-item-count" :title="item.count">
        {{ item.count }}
        <span class="rank-item-unit" :title="item.unit">{{ item.unit }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { sortBy, cloneDeep } from 'lodash';

// 定义 props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 640,
      height: 390,
      colors: ['#00f8ff', '#00f15a', '#0696f9', '#dcf776', '#00f8ff'],
      data: [],
    }),
  }
});

// 定义 emits
const emit = defineEmits(['medoVRankRowClick']);

// 响应式状态
const rankList = ref([]);

// 转换颜色函数
const hexToRgba = (hex, opacity) => {
  let rgbaColor = '';
  let reg = /^#[\da-f]{6}$/i;
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
      '0x' + hex.slice(5, 7),
    )},${opacity})`;
  }
  return rgbaColor;
};

// 点击行事件
const medoVRankRowClick = (row) => {
  emit('medoVRankRowClick', row);
};

// 监听数据变化
watch(
  () => props.options.data,
  (value) => {
    let arr = cloneDeep(value);
    if (arr && arr.length > 0) {
      arr = sortBy(arr, o => -o.count);
      const first = arr[0];
      arr.map(ele => {
        ele.percent = (ele.count / first.count).toFixed(4) * 100;
      });
    }
    rankList.value = arr;
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style scoped lang="less">
.medo-rank-container {
  overflow-y: auto;
}
.rank-item {
  height: 38px;
  line-height: 38px;
  cursor: default;
  padding: 0 10px;
  &:hover {
    cursor: pointer;
  }
  &-no {
    font-size: 16px;
    font-family: Roboto;
    font-weight: normal;
    line-height: 32px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  &-name {
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #b7cfdc;
    text-align: center;
  }
  &-count {
    font-size: 18px;
    font-family: DIN Alternate;
    font-weight: bold;
    color: #bfd5e8;
    text-align: center;
  }
  &-unit {
    font-size: 12px;
  }
}
</style>
